import { defineComponent, toRefs } from 'vue'
import Dialog from './index.module.scss'

export default defineComponent({
  name: 'Dialog',
  emits: ['click'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isAn: {
      type: Boolean,
      default: true
    },
    customeClass: {
      type: String,
      default: ''
    }
  },

  setup(props, { slots, emit }) {
    const { visible, isAn } = toRefs(props)
    const hanleBgClick = (event:MouseEvent) => {
      emit('click', event)
    }
    const sectionClass = `${Dialog.appPop} ${props.customeClass}`
    return () => (
      <>
        {
          visible.value && (
            <section class={sectionClass} onClick={hanleBgClick}>
              <div class={Dialog.popBox}>
                <div class={isAn.value ? Dialog.animated : ''}>
                  {
                    slots.default && slots.default()
                  }
                </div>
              </div>
            </section>
          )
        }
      </>
    )
  }
})
